@import 'swiper/swiper.scss';
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body, #root, .wrap {
    width: 100%;
    height: 100%;
}
.wrap{
    display: flex;
    flex-direction: column;
    footer{
        width: 100%;
        height: 45px;
        display: flex;
        text-align: center;
        align-items: center;
        border-top: 1px solid skyblue;
        a{
            width: 50%;
            height: 45px;
            line-height: 45px;
            flex: 1;
            text-decoration: none;
            &.active{
                color: red;
                background: pink;
            }
        }
    }
    main{
        flex: 1;
        width: 100%;
        height: 100%;
        overflow: auto;
        .menu-wrap{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .swiper-slide{
                img{
                    width: 100%;
                    height: 200px;
                }
            }
            .tab{
                flex: 1;
                width: 100%;
                overflow: hidden;
                height: 380px;
                display: flex;
                .type-area{
                    height: 420px;
                    flex: 3;
                    background: #eee;
                    overflow-y: scroll;
                    ul{
                        li{
                            line-height: 45px;
                            text-align: center;
                            &.active{
                                background: #fff;
                                color:red;
                            }
                        }
                    }
                }
                .content-wrap{
                    height: 420px;
                    flex: 7;
                    overflow-y: scroll;
                    .content{
                        width: 100%;
                        border-left: 1px solid #000;
                        dl{
                            display: flex;
                            align-items: center;
                            border-bottom: 1px solid orange;
                            dt{
                                margin: 5px;
                                display: flex;
                                align-items: center;
                            }
                            dd{
                                p{
                                    line-height: 25px;
                                    span{
                                        display: block;
                                        width: max-content;
                                        height: 25px;
                                        background: blue;
                                        box-sizing: border-box;
                                        padding: 0 10px;
                                        border-radius: 5px;
                                        color: #fff;
                                        text-align: center;
                                        line-height: 25px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
.shop-wrap{
    width: 100%;
    height: 100%;
    h2{
        text-align: center;
        line-height: 45px;
    }
    dl{
        display: flex;
        dt{
            margin: 0 5px;
        }
        dd{
            p{
                line-height: 30px;
                display: flex;
                span{
                    display: block;
                    width: 30px;
                    height: 30px;border-radius: 50%;
                    background: blue;
                    color: #fff;
                    text-align: center;
                    line-height: 30px;
                }
                b{
                    margin: 0 8px;
                }
            }
        }
    }
}